<template>
	<!-- 添加车辆 -->
	<view class="addCar">
		<u-navbar title="修改授权信息" title-color="#333" back-icon-color="#333"></u-navbar>
		<view class="addCar-bottom">
			<view class="addCar-content-box">
				<view class="ygadd-main">
					<view class="addCar-carName-phone">
						<text class="addCar-phone">手机号：</text>
						<input class="addCar-input-one" type="number" @input="phoneIptInput" placeholder="请输入手机号" v-model="sqobjed.phone"
							maxlength="11" />
					</view>
					<view class="addCar-carName-phone">
						<text class="addCar-phone">授权类型：</text>
						<view class="addCar-input-one" @click="sqlxFun">
							<text v-if="!sqlxobj.label" class="addCar-input-one" style="color: grey;">请选择</text>
							<text>{{sqlxobj.label}}</text>
						</view>
						
						<!-- <input class="addCar-input-one" type="tel" placeholder="请输入手机号" v-model="nameIpt"
							maxlength="11" /> -->
							
					</view>
					<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
					<view class="addCar-carName-phone" v-if="sqlxobj.value=='2'">
						<text class="addCar-phone">授权额度：</text>
						<input class="addCar-input-one" type="number" placeholder="请输入授权额度" v-model="sqobjed.sqed" />
					</view>
					<!-- <view class="addCar-carName-phone">
						<text class="addCar-phone">密码：</text>
						<input class="addCar-input-one" type="text" placeholder="请输入密码" v-model="ygpas" />
					</view> -->
				</view>

				<!-- <view class="add-phone-main">


					<view class="addCar-carName-phone" v-for="(item, index) in list">
						<text class="addCar-phone">账号：</text>
						<input class="addCar-input-one" type="number" @input="phoneIptInput" placeholder="请输入联系方式"
							v-model="item.phone" maxlength="11" />
						<span style="color: red;" v-if="list.length>=2" @click="delItem(item)">删除</span>

					</view>
					<view class="add-phone" @click="addItem">添加</view>
				</view>
				<view class="addCar-carName-phone">
					<text class="addCar-phone">皮重：</text>
					<input class="addCar-input-one" @input="tareIptInput" placeholder="请输入皮重" type="number"
						v-model="tareIpt" />
					<text class="addCar-dun">吨</text>
				</view> -->
			</view>
			<!--  -->
			<view class="addCar-reset-determine">
				<!-- <view class="add-phone" @click="addItem">新增电话</view> -->
				<view class="addCar-reset" @click="reset">重置</view>
				<view class="addCar-determine" @click="determine">确定</view>
			</view>
		</view>
		<u-modal v-model="addCarLoginShow" content="请确认授权信息" :show-cancel-button="true" @confirm="addCarConfirm">
			<view class="sqqrpop">
				<view class="">
					<text>授权账号: <text style="color: #FF0000; padding-left: 20rpx;">{{sqobjed.phone}}</text></text>
				</view>
				<view class="">
					<text>授权类型: <text style="padding-left: 20rpx;">{{sqlxobj.label}}</text> </text>
				</view>
				<view v-if="sqlxobj.value =='2'" class="">
					<text>授权额度: <text style="color:#ff0000;">{{sqobjed.sqed}}</text> </text>
				</view>
			</view>
			
		</u-modal>
		<u-keyboard ref="uKeyboard" mode="car" @change="carValChange" @backspace="carBackspace" v-model="carshow"
			:mask="false"></u-keyboard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: JSON.parse(uni.getStorageSync('userinfo')),
				componeryArr: [],
				addressNew: null,
				Index: 0,
				diasabledInput: true, //可读不可写
				carNumberIpt: '', //车牌号
				phone: '', 
				sqed: '', 
				addCarLoginShow: false,
				carshow: false,
				carType: '',
				show: false,
				list: [{
						value: '1',
						label: '额度共享'
					},
					{
						value: '2',
						label: '指定额度'
					}
				],
				sqobjed:{},
				sqlxobj:{}
			}
		},
		onShow() {

		},
		onLoad(op) {
			console.log(op)
			this.sqobjed = op
			
			if(this.sqobjed.sqlx =='2'){
				this.sqlxobj={
					value: '2',
					label: '指定额度'
				}
			}
			if(this.sqobjed.sqlx =='1'){
				this.sqlxobj={
					value: '1',
					label: '额度共享'
				}
			}
		},
		methods: {
			
			sqlxFun(){
				this.show = true;
			},
			phoneIptInput() {
				if (this.phone.length > 11) {
					this.phone = this.phone.slice(0, 11)
				}
			},
			confirm(e) {
				console.log(e);
				this.sqlxobj = e[0]
				console.log(this.sqlxobj)
			},
			addItem() {
				if (this.list.length == 3) {
					uni.showToast({
						title: '最多三个',
						icon: 'none'
					})
					return false
				}
				// let add = {
				// 	id: parseInt(this.id) + 1
				// }
				this.list.push({
					phone: ''
				})
				// this.id = parseInt(this.id) + 1
				// this.phoneIpt += parseInt(this.id) + 1
				console.log(this.list)
			},
			delItem(item) {
				if (this.list.length == 1) {
					uni.showToast({
						title: '不能删除第1个',
						icon: 'none'
					})
					return false;
				}
				this.list = this.list.filter((i) => {
					return i != item
				})
			},
			carValChange(val) {
				// 将每次按键的值拼接到carNumberIpt变量中，注意+=写法
				this.carNumberIpt += val;
			},
			carBackspace() {
				// 删除carNumberIpt的最后一个字符
				if (this.carNumberIpt.length) this.carNumberIpt = this.carNumberIpt.substr(0, this.carNumberIpt.length -
					1);
			},
			boardClick() {
				this.carshow = true
			},
			tareIptInput() { //限制验证码长度
				if (this.tareIpt.length > 6) {
					this.tareIpt = this.tareIpt.slice(0, 6)
				}
			},
			
			// 确定
			determine() {
				var regP = /^1[3-9][0-9]{9}$/;
				if (this.sqobjed.phone == '') {
					return uni.showToast({
						title: '请输入手机号',
						duration: 5000,
						icon: 'none',
					});
				}
				if(!regP.test(this.sqobjed.phone)){
					return uni.showToast({
						title: '手机号格式不正确，请检查',
						duration: 5000,
						icon: 'none',
					});
				}
				if (!this.sqlxobj.label) {
					return uni.showToast({
						title: '请选择授权类型',
						duration: 5000,
						icon: 'none',
					});
				}
				
				
				if(this.sqlxobj.value=='2'){
					if(this.sqobjed.sqed == ''){
						return uni.showToast({
							title: '请输入授权额度',
							duration: 5000,
							icon: 'none',
						});
					}
				}
				
				this.addCarLoginShow = true

			},
			addCarConfirm() {
				// if (this.userinfo.sign == 'CUS-1') {
				// 	var ORMTB400ID = this.userinfo.ORMTB400ID
				// } else if (this.userinfo.sign == 'CUS-2' || this.userinfo.sign == 'CUS-3') {
				// 	var ORMTB400ID = this.userinfo.ORMTB410ID
				// }
				uni.request({
					url: this.baseUrl + '/orm/ormtb481/updateOrmtb478',
					method: 'POST',
					dataType: 'json',
					data: {
						ORMTB481ID:this.sqobjed.ID,
						ORMTB410CA01: this.userinfo.ORMTB410ID,
						ORMTB410CA06: this.sqobjed.phone,
						ORMTB481CA01: this.sqlxobj.value,
						ORMTB481CA02: this.sqobjed.sqed
					},
					success: (res) => {
						console.log(res);
						if (res.data.code == 200) {
							uni.showToast({
								title: '添加成功',
								duration: 5000,
								icon: 'none',
							});
							uni.navigateBack()
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 5000,
								icon: 'none',
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: res.data.message,
							duration: 5000,
							icon: 'none',
						});
					}
				});
			},
			// 重置
			reset() {
				this.phone = ''
				this.sqlxobj = {}
				this.sqed = ''
			}
		}
	}
</script>

<style scoped>
	.addCar input {
		border: 0;
	}

	.addCar {
		width: 100%;
		min-height: 100vh;
		background-color: rgba(242, 242, 242, 1);
		overflow: hidden;
	}

	/* 列表 */

	/* 内容 */
	.addCar-content-box {
		width: 100%;
		padding: 0 24rpx;
		padding-top: 20rpx;

	}

	.ygadd-main {
		background: rgba(255, 255, 255, 1);
		border-radius: 10px;
		padding-left: 20rpx;
	}

	.addCar-carName-phone {
		border-bottom: 2rpx solid rgba(230, 230, 230, 1);
		padding: 18rpx 0;
	}

	.addCar-input-one {
		width: 310rpx !important;
		display: inline-block;
		margin-bottom: 0 !important;
		padding: 0 !important;
		height: 44rpx !important;
		vertical-align: middle;
		/* margin-left: 0.1rem; */
		color: rgba(51, 51, 51, 1);
		font-size: 38rpx;
		text-align: center;
	}

	.addCar-phone {
		width: 241rpx;
		display: inline-block;
		/* font-size: 30rpx; */
		color: rgba(102, 102, 102, 1);
		vertical-align: middle;
		/* background: #000000; */
	}

	.addCar-phone-placeholder {
		/* font-size: 30rpx; */
		color: rgba(102, 102, 102, .5);
	}

	.addCar-dun {
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
	}

	/* 按钮 */
	.addCar-reset-determine {
		margin-top: 167rpx;
		display: flex;
		justify-content: center;

	}



	.addCar-reset-determine>view {
		width: 159rpx;
		text-align: center;
		line-height: 65rpx;
		color: rgba(255, 255, 255, 1);
		/* font-size: 32rpx; */
	}

	.addCar-reset {
		width: 159rpx;
		background: rgba(234, 197, 15, 1);
		text-align: center;
		/* margin-left: 170rpx; */
		margin: 0 20rpx;
		border-radius: 10rpx;
	}

	.addCar-determine {
		background: rgba(0, 161, 244, 1);
		border-radius: 10rpx;
		margin-left: 60rpx;
	}

	.add-phone-main {
		position: relative;
	}

	.add-phone {
		position: absolute;
		top: 20rpx;
		right: 0;
		/* font-size: 50rpx; */
		color: rgba(0, 255, 127, 1);
		/* background: rgba(0, 255, 127, 1); */

	}

	.addCar-phone-car {
		display: inline-block;
		width: 310rpx;
		height: 44rpx;
		line-height: 44rpx;
		/* border: 1px solid rgba(0, 0, 0, .2); */
		/* border-radius: 3px; */
		text-align: center;
		vertical-align: middle;
		font-size: 30rpx;
	}

	input::placeholder {
		color: rgba(102, 102, 102, .5);
	}

	.item-box {
		display: flex;
	}
	.sqqrpop{
		padding: 30rpx;
		line-height: 70rpx;
		text-align: center;
	}
</style>
